<template>
  <div>
    <el-row>
      <el-col>
        <!-- 列表ip -->
        <el-table :data="ipRangeList">
          <el-table-column label="序号" align="center" prop="no" >
            <template slot-scope="scope">{{scope.$index+1}}</template>
          </el-table-column>
          <el-table-column label="IP地址">
            <template slot-scope="scope">

                <el-input
                  v-if="scope.row.id==editId"
                  v-model="scope.row.editingIpAddress"
                  fixed-width="50px"
                  ></el-input>
                <span v-else>{{scope.row.ipAddress}}</span>

                <span v-if="scope.$index!=0">/</span>

                <el-input
                  v-if="scope.row.id==editId"
                  v-model="scope.row.editingIpAddressMask"
                  fixed-width="50px"
                  ></el-input>
                <span v-else>{{scope.row.ipAddressMask}}</span>

            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template v-slot="scope">
              <el-button v-preventReClick size="mini" type="text" icon="el-icon-edit"
                @click="handleUpdateIpRange(scope.$index, scope.row)"
                v-hasPermi="['hbcsupport:hbc-client-auth:update']"
                v-if="scope.row.id!=editId"
                >编辑</el-button>
              <el-button v-preventReClick size="mini" type="text" icon="el-icon-delete"
                @click="handleDeleteIpRange(scope.$index, scope.row)"
                v-hasPermi="['hbcsupport:hbc-client-auth:update']"
                v-if="scope.row.id!=editId"
                >删除</el-button>
              <el-button v-preventReClick size="mini" type="text" icon="el-icon-check"
                @click="handleEndEditIpRange(scope.$index, scope.row)"
                v-hasPermi="['hbcsupport:hbc-client-auth:update']"
                v-if="scope.row.id==editId"
                >完成</el-button>
              <el-button v-preventReClick size="mini" type="text" icon="el-icon-close"
                @click="handleCancelEditIpRange(scope.$index, scope.row)"
                v-hasPermi="['hbcsupport:hbc-client-auth:update']"
                v-if="scope.row.id==editId"
                >取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-button v-preventReClick type="primary"
          icon="el-icon-add"
          v-hasPermi="['hbcsupport:hbc-client-auth:update']"
          @click="handleAddIpRange">添加</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  props:["ipRangeList"],
  data() {
    return {
      editId: 0
    }
  },
  mounted() {

  },
  methods: {
    //==== ip range list
    handleUpdateIpRange(index,row){
      this.editId = row.id;
      // XXX TODO 这里直接赋值的话，无法双向绑定！！！
      this.$set(row, 'editingIpAddress', row.ipAddress);
      if(index!=0){// 需求图上，只有第一条是单个ip
        this.$set(row, 'editingIpAddressMask', row.ipAddressMask);
      }else{
        this.$set(row, 'editingIpAddressMask', "");
      }
      // console.log("handleUpdateIpRange:row",row);
    },
    handleDeleteIpRange(index,row){
      let id = row.id;
      // XXX TODO 查找一下，防止因为删除表格数据时引发的索引换乱和操作错误数据记录
      index = this.ipRangeList.findIndex((value, index, arr) => {return value.id==id})
      if(index!=-1){
        this.ipRangeList.splice(index, 1);
      }
    },
    handleAddIpRange(){
      // 需要在后台保存时，会重新生成
      this.ipRangeList.push({
        id: (new Date).getTime(),
        no: this.ipRangeList.length+1,
        ipAddress:"",
        ipAddressMask:""
      });
      // XXX TODO 重新绑定数据，防止事件混乱
      // this.ipRangeList=JSON.parse(JSON.stringify(this.ipRangeList));
    },
    handleEndEditIpRange(index,row){
      this.editId = "";
      row.ipAddress = row.editingIpAddress;
      row.ipAddressMask = row.editingIpAddressMask;
      // console.log("handleEndEditIpRange",row);
    },
    handleCancelEditIpRange(index,row){
      this.editId = "";
      // console.log("handleCancelEditIpRange",row);
    },
  }
}
</script>
